<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>


<head>

	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<title>day04</title>
	<link rel="stylesheet" href="day.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
	<script type="text/javascript" src="30days.js"></script>
	
	<style type="text/css">
	
	</style>
	
	<script type="text/javascript">
	
	</script>
	
</head>



<body>

	<h1>day 4 - Events 101</h1>
	
	<div>
		<button data-file="day">Day</button>
		<button data-file="night">Night</button>
	</div>
	
	<script type="text/javascript">	
		
		// javascript function that executes when page loads
		(function () {
			var link = $('link');
			$('button').click(function() {
				
				// we get the button but we cant do nothing with him
				console.log(this);
				
				// jquery this reference the 'button' so we can use jquery functions
				var jQtmp = $(this);
				console.log(jQtmp);
				
				var stylesheet = jQtmp.data('file');
				
				link.attr('href', stylesheet + '.css');
				
				jQtmp
					.siblings('button')
					.removeAttr('disabled');
				
				jQtmp.attr('disabled','disabled');
			});
		})();
	</script>

</body>






</html>